<!DOCTYPE html>
<html chrome_comp_test="element_click">
<head>
<script>
function $(id) {
  return document.getElementById(id);
}
</script>
</head>
<body>
<h1>SD9025</h1>

<h3>The element's background color will be gray if its click method is called successfully.</h3>
<p>1. The element which is not the INPUT or BUTTON element when using the click method in the native state.</p>
<div><span id="test1" onclick="this.parentNode.style.backgroundColor='#ddd'" expectedProblems="SD9025">SPAN</span></div>
<script>
try {
  $('test1').click();
} catch(e) {
  $('test1').innerHTML += '<br />error: ' + e;
}
</script>
<br />

<hr />


<h2>The followings don't have problems</h2>
<p>A1. The BUTTON element in the native state.</p>
<div><button id="test2" onclick="this.parentNode.style.backgroundColor='#ddd'">BUTTON</button></div>
<script>
try {
  $('test2').click();
} catch(e) {
  $('test2').innerHTML += '<br />' + e;
}
</script>
<br />

<p>A2. The INPUT element in the native state.</p>
<div><input type="text" id="test3" value="INPUT" onclick="this.parentNode.style.backgroundColor='#ddd'" /></div>
<script>
try {
  $('test3').click();
} catch(e) {
  $('test3').innerHTML += '<br />' + e;
}
</script>
<br />

<p>A3. The element which is not the INPUT or BUTTON element using the click method with Prototype library.</p>
<div><div id="test4" onclick="this.parentNode.style.backgroundColor='#ddd'">DIV</div></div>
<script>
HTMLElement.prototype.click = function() {
  var clickEvent = document.createEvent('Event')
  clickEvent.initEvent('click', true, false);
  this.dispatchEvent(clickEvent)
}
try {
  $('test4').click();
} catch(e) {
  $('test4').innerHTML += '<br />' + e;
}
</script>
<br />

<p>A4. The element which is not the INPUT or BUTTON element using the trigger method with jQuery library.</p>
<div><div id="test5" onclick="this.parentNode.style.backgroundColor='#ddd'">DIV</div></div>
<script src="jquery.js"></script>
<script>
try {
  jQuery('#test5').eq(0).trigger('click');
} catch(e) {
  jQuery('#test5').get(0).innerHTML += '<br />' + e;
}
</script>

<p>(End of test)</p>

</body>
</html>